<template>
  <div>
    <h1>基本信息</h1>
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <tr>
        <td>
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="性别:" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="院校:" prop="colleges">
            <el-input v-model="form.colleges" placeholder="请选择院校"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="专业:" prop="specialized">
            <el-input v-model="form.specialized" placeholder="请输入专业"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="家庭住址:" prop="address">
            <el-input v-model="form.address" placeholder="请输入家庭住址"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="学历:" prop="degree">
            <el-select v-model="form.degree" placeholder="请选择学历" clearable>
              <el-option v-for="item in qw" :key="item.id" :label="item.degreeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="政治面貌:">
            <el-input v-model="form.politicalface" placeholder="请输入政治面貌"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="民族:">
            <el-input v-model="form.ethin" placeholder="请输入民族"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="籍贯:">
            <el-input v-model="form.origin" placeholder="请输入籍贯"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="婚姻:">
            <el-select v-model="form.marriage" placeholder="请选择婚姻" clearable>
              <el-option v-for="item in we" :key="item.id" :label="item.marriageName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="出生年月">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择出生年月" v-model="form.dateofbirth" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="邮箱:">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="身份证号:" prop="socialsecuritynumber">
            <el-input v-model="form.socialsecuritynumber" placeholder="请输入身份证号"></el-input>
          </el-form-item>
        </td>
      </tr>
      <h1>职业信息</h1>
      ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
      <tr>
        <td>
          <el-form-item label="部门:" prop="buMen">
            <el-select v-model="form.buMen" placeholder="请选择部门" clearable>
              <el-option v-for="item in options" :key="item.id" :label="item.buMenName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="职位:" prop="posts">
            <el-select v-model="form.posts" placeholder="请选择职位" clearable>
              <el-option v-for="item in opp" :key="item.id" :label="item.postsName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="员工状态:" prop="type">
            <el-select v-model="form.type" placeholder="请选择员工状态" clearable>
              <el-option v-for="item in oo" :key="item.id" :label="item.stateName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        name: '',
        sex: '',
        phone: '',
        colleges: '',
        specialized: '',
        address: '',
        degree: '',
        politicalface: '',
        ethin: '',
        origin: '',
        marriage: '',
        dateofbirth: '',
        email: '',
        socialsecuritynumber: "",
        buMen: '',
        posts: '',
        type: "",
      },
      rules: {
        name: [
          { required: true, message: '请输入姓  名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        ren: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
        ],
        colleges: [
          { required: true, message: '请输入院  校', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        specialized: [
          { required: true, message: '请输入专 业', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' },
        ],
        degree: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        buMen: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        posts: [
          { required: true, message: '请选择职位', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择员工状态', trigger: 'change' }
        ],
        phone: [
          {
            required: true,
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        socialsecuritynumber: [
          {
            required: true,
            pattern: /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }
        ],
      },

      qw: [],
      we: [],
      options: [],
      opp: [],
      oo: [],
    }
  },
  created () {
    this.BingXue();
    this.BingBu();
    this.BingZhi();
    this.BingType();
    this.BingHun();
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Add();
        } else {
          console.log('请输入必填项!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    Add () {
      this.$http({
        url: "https://localhost:44357/api/Emp/EmpAdd",
        method: "post",
        data: this.form
      }).then((r) => {
        if (r.data = 200) {
          this.$message({
            message: '恭喜你，员工新增成功！',
            type: 'success'
          });
          this.$router.push("/EmpSel");
        }
      })
    },
    BingBu () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingBu",
        method: "get",
      }).then((r) => {
        this.options = r.data;
      })
    },
    BingZhi () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingZhi",
        method: "get",
      }).then((r) => {
        this.opp = r.data;
      })
    },
    BingType () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingType",
        method: "get",
      }).then((r) => {
        this.oo = r.data;
      })
    },
    BingXue () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingXue",
        method: "get",
      }).then((r) => {
        this.qw = r.data;
      })
    },
    BingHun () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingHun",
        method: "get",
      }).then((r) => {
        this.we = r.data;
      })
    },
    onSubmit () {
      console.log('submit!');
    }
  }
}
</script>